import React, { useMemo, useCallback, useState } from 'react';
import Header from '@/component/layout/Header/Header';
import CommonTab from '@/component/common/CommonTab/CommonTab';
import { InputItem, List } from 'antd-mobile';
import Learning from "@/component/layout/Learning/Learning";
import Medical from "@/component/layout/Medical/Medical";
import ProList from "@/component/layout/ProList/ProList";

import CommonList from '@/component/common/CommonList/CommonList';
import { getSearchList } from '@/network/protocol';

import './style.less';

// 0 产品
// 1 医学
// 2 会议
// 3 未来

let id = null;
let tabkey1 = 0;

const debounce = (func, delay) => {// 防抖 触发后 N秒才执行 如果在N秒内又出发， 则重新计时 主要用于 search
  return function (args) {
    let that = this, _args = args;
    clearTimeout(id);
    id = setTimeout(function () {
      func.call(that, _args);
    }, delay);
  }
}

const pageSize = 20;

const Search = (props) => {
  const history = props.history;
  const [tabKey, setTabKey] = useState(tabkey1);
  const [keyword, setkeyword] = useState(''); // 用来控制input框的变化
  const [param, setParam] = useState({pageIndex: 1, pageSize, searchType: tabKey, keyword: '',});

  const setkeyword1F = debounce((e) => {
    setParam({...param, pageIndex:1,keyword:e })
    // setkeyword1(e)
  }, 300)

  const onChange = useCallback((e) => {
    setkeyword(e)
    setkeyword1F(e)
  }, [setkeyword1F])

  const NingG = useCallback((props) => {
    const { data } = props;
    // 0:宁观点 1：宁Live
    const gotoDetail = () => {
      if (data.tag === 0) {
        history.push('/ningGDetail?id=' + data.id)
      } else {
        window.location.href = data.videoURL
      }
    }
    return (
      <div className="Qianyan-box-t" onClick={gotoDetail}>
        <div className="Qianyan-box-t-img">
          <img src={data.imgURL} alt="" />
        </div>
        <div className="Qianyan-box-right">
          <p className="Qianyan-box-right-title">{data.title}</p>
          <p className="Qianyan-shortIntroduce">{data.shortIntroduce}</p>
        </div>
      </div>
    )
  }, [history])

  const viewMap = useMemo(() => {
    return [
      ProList, Medical, Learning, NingG
    ][tabKey]
  }, [NingG, tabKey])

  const clickTab = useCallback((key) => {
    if(key === tabKey) return;
    tabkey1 = key;
    setTabKey(key)
    setParam({...param, pageIndex:1,searchType:key })
  }, [param, tabKey])

  const update = useCallback(() => {
    setParam({...param, pageIndex:param.pageIndex+1})
  }, [param])

  const conf = useMemo(() => {
    return [
      { value: '产品知识', url: [require('@/assests/img/protab1-0.png'), require('@/assests/img/protab1-1.png')], },
      { value: '医学知识', url: [require('@/assests/img/protab2-0.png'), require('@/assests/img/protab2-1.png')], },
      { value: '学术动态', url: [require('@/assests/img/tab3-1.png'), require('@/assests/img/tab3-0.png')], },
      { value: '宁聚未来', url: [require('@/assests/img/future0-0.png'), require('@/assests/img/future0-1.png')], },
    ]
  }, [])

  return (
    <>
      <Header center={<span>搜索</span>} />
      <div className="global-content Search-box">
        <List className="input-list">
          <InputItem placeholder="搜索" value={keyword} onChange={onChange} />
          <img className="ico-search" src={require('../../assests/img/sousuo.png')} alt="" />
        </List>
        <CommonTab conf={conf} clickTab={clickTab} tabKey={tabKey}/>
        <div className="Search-CommonList-box">
          <CommonList update={update} viewCmp={viewMap} param={param} method={getSearchList} />
        </div>
      </div>
    </>
  )
}

export default Search 